<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文章列表</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="./css/main.css">
    <script src="./libs/jquery/jquery.min.js"></script>
    <script src="./libs/bootstrap/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container-fluid">
        <div class="common_title">
            文章类别管理
        </div>
        <div class="container-fluid common_con">
            <div class="row" style="margin-top: 10px;">
                <div
                    class="col-xs-offset-10 col-sm-offset-10 col-md-offset-10 col-lg-offset-10 col-xs-2 col-sm-2 col-md-2 col-lg-2">
                    <a href="javascript:void(0)" class="btn btn-success" id="xinzengfenlei" data-toggle="modal"
                        data-target="#myModal">新增分类</a>

                    <!-- <button class="btn btn-success" onclick="openmodal()">js打开模态框</button> -->
                </div>
            </div>
            <table class="table table-striped table-bordered table-hover mp20 category_table">
                <thead>
                    <tr>
                        <th>名称</th>
                        <th>描述</th>
                        <th class="text-center" width="100">操作</th>
                    </tr>
                </thead>
                <tbody id="tbody">
                    <tr>
                        <td>爱生活</td>
                        <td>热爱生活</td>
                        <td class="text-center">
                            <a href="javascript:void(0)" data-toggle="modal" class=" btn btn-info btn-xs">编辑</a>
                            <a href="javascript:void(0)" class="btn btn-danger btn-xs">删除</a>
                        </td>
                    </tr>
                </tbody>

            </table>
        </div>
    </div>

    <!-- 新增分类布局区域 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">新增分类</h4>
                </div>
                <div class="modal-body">
                    <div class="add_category">
                        <div class="form-group">
                            <label for="name">分类名</label>
                            <input type="text" class="form-control" id="name" placeholder="分类名">
                        </div>
                        <div class="form-group">
                            <label for="slug">分类别名</label>
                            <input type="text" class="form-control" id="slug" placeholder="分类别名">
                        </div>
                        <div class="modal-footer">
                            <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
                            <button type="button" id="btnadd" class="btn btn-primary btn_opt">保存</button>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>
    <!-- 编辑区域 -->
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">编辑分类</h4>
                </div>
                <div class="modal-body">
                    <div class="add_category">
                        <div class="form-group">
                            <label for="name">分类名</label>
                            <input type="text" class="form-control" id="old_name" placeholder="分类名">
                        </div>
                        <div class="form-group">
                            <label for="slug">分类别名</label>
                            <input type="text" class="form-control" id="old_slug" placeholder="分类别名">
                        </div>
                        <div class="modal-footer">
                            <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
                            <button type="button" id="btnedit" class="btn btn-primary btn_opt">保存</button>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>

    <script src="./libs/layui/layui.js"></script>
    <script src="./js/jqconfig.js"></script>
    <!-- 导入teamplate-web模板引擎 -->
    <script src="./libs/art-template/template-web.js"></script>
    <script id="list" type="text/html">
        {{each data}}
        <tr>
            <td>{{$value.name}}</td>
            <td>{{$value.slug}}</td>
            <td class="text-center">
                <a href="javascript:void(0)" data-toggle="modal" onclick="editopen({{$value.id}})" class=" btn btn-info btn-xs">编辑</a>
                <a href="javascript:void(0)" onclick="deldata({{$value.id}})" class="btn btn-danger btn-xs">删除</a>
            </td>
        </tr>
        {{/each}}
    </script>
    <script>
        // function openmodal() {
        //     // 执行一个js打开模态款
        //     $('#myModal').modal('show');
        //     // 关闭模态框
        //     $('#myModal').modal('hide');
        // }

        // 入口函数
        var layer;
        layui.use('layer', function () {
            layer = layui.layer;

            getCateList();

            // 初始化addcate给新增界面的保存按钮注册点击事件
            addCate();

            // 调用regBtnEditClick完成注册点击事件
            regBtnEditClick();
        })
        // $(function () {
        //     getCateList();
        // })

        // 1.0 获取文章分类数据方法
        function getCateList() {

            $.ajax({
                url: '/admin/category/list',
                type: 'get',
                success: function (res) {
                    //  进行错误处理
                    if (res.code !== 200) {
                        layer.msg(res.msg, { time: 500 });
                        return;
                    }
                    // 正常逻辑处理
                    let trString = template('list', res);
                    $('#tbody').html(trString);

                }
            })
        }

        // 2.0 文章分类的新增
        function addCate() {
            // 注册点击事件
            $('#btnadd').click(function () {
                // 1.收集用户输入的数据
                let name = $('#name').val();
                let slug = $('#slug').val();

                // 2. 将数据调用接口：/admin/category/add 完成新增
                $.ajax({
                    url: '/admin/category/add',
                    type: 'post',
                    data: { name, slug },
                    success: function (res) {
                        if (res.code !== 200) {
                            layer.msg(res.msg);
                            return;
                        }
                        // 3.调用getCateList 方法完成数据列表刷新
                        getCateList();

                        // 4. 关闭模态框同时清空用户的输入
                        $('#name,#slug').val('');
                        $('#myModal').modal('hide');
                    }
                })
            })
        }

        // 3.0 定义一个删除方法deldata
        function deldata(id) {
            // 1.0 确认是否真的删除
            // if (confirm('你真的要删除吗?')) {
            //     // 2.0 用户同意就发送ajax请求删除数据
            //     $.ajax({
            //         url: '/admin/category/delete',
            //         type: 'post',
            //         data: { id },
            //         success: function (res) {
            //             if (res.code !== 200) {
            //                 layer.msg(res.msg);
            //                 return;
            //             }
            //             // 3.0 刷新列表getCateList()
            //             getCateList();
            //         }
            //     })
            // }

            // 优化处理：使用layui中的confirm方法美化询问框
            layer.confirm('你真的要删除吗?', { icon: 3, title: '删除提示' },
                function (index) {
                    //这个回调函数是当用户点击了确认按钮的时候触发的
                    // 2.0 用户同意就发送ajax请求删除数据
                    $.ajax({
                        url: '/admin/category/delete',
                        type: 'post',
                        data: { id },
                        success: function (res) {
                            if (res.code !== 200) {
                                layer.msg(res.msg);
                                return;
                            }
                            // 3.0 刷新列表getCateList()
                            getCateList();

                            // 关闭询问框
                            layer.close(index);
                        }
                    })
                });
        }

        // 4.0 定义一个编辑模态框打开方法同时获取id
        let cate_id;
        function editopen(id) {
            cate_id = id;
            // alert(id)
            // 1.0 打开模态框
            $('#editModal').modal('show');

            // 2.0 根据id获取到文章分类数据回显到模态框中的区域
            $.ajax({
                url: '/admin/category/search',
                type: 'get',
                data: { id },
                success: (res) => {
                    // res.data是一个数组，所以要取第一个数据：res.data[0]
                    if (res.code !== 200) {
                        layer.msg(res.msg, { time: 500 })
                        return;
                    }

                    let data = res.data[0];
                    // 将数据回显到模态窗口中
                    $('#old_name').val(data.name);
                    $('#old_slug').val(data.slug);
                }
            })
        }

        // 4.0.1 用户点击编辑模态框中的保存按钮所做的逻辑
        function regBtnEditClick() {
            $('#btnedit').click(function () {
                // 1.0 获取表单元素数据
                let name = $('#old_name').val();
                let slug = $('#old_slug').val();
                let id = cate_id;

                // 2.0 将数据发送给服务接口：/admin/category/edit
                $.ajax({
                    url: '/admin/category/edit',
                    type: 'post',
                    data: { id, name, slug },
                    success: (res) => {
                        if (res.code !== 200) {
                            layer.msg(res.msg, { time: 500 })
                            return;
                        }
                        // 3.0 刷新
                        getCateList();

                        // 4.0 关闭模态框同时清空数据
                        $('#old_name,#old_slug').val('');
                        $('#editModal').modal('hide');

                    }
                })
            })
        }
    </script>
</body>

</html>